<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebView Template</title>
  <style>
    html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      box-sizing: border-box;
    }

    iframe#androidWebViewIFrame {
      border: 0px;
      width: 100%;
      height: 100%;
    }

    .refresh-btn {
      width: 12px;
      height: 12px;
      position: absolute;
      right: 19px;
      top: 16px;
      color: #fff;
      line-height: 12px;
      z-index: 99999999;
      cursor: pointer;
    }

    #reloadBox {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.2)
    }

    .loading-page-text {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

    .loading-page-text-info {
      width: 144px;
      overflow: hidden;
      height: 25px;
      animation: changeLoadWidth 2s linear infinite;
    }

    @keyframes changeLoadWidth {
      form {
        width: 144px;
      }

      to {
        width: 200px;
      }
    }

  </style>
</head>

<body>
  <script>
    function reloadWinPage() {
      console.log("重新加载页面");
      window.location.reload();
    }
  </script>
  <!--  <iframe id="androidWebViewIFrame" style="width:100%;height:100%"  src="http://10.239.136.239:3000/"></iframe>-->
  <iframe id="androidWebViewIFrame" name="androidWebViewIFrame" src="#"></iframe>
  <section id="client-tool-bar">
    <div class="refresh-btn" onclick="reloadWinPage()">↻</div>
    <div id="reloadBox">
      <div class="loading-page-text">
        <div class="loading-page-text-info">
          正在加载中,请稍后 . . . . . .
        </div>
      </div>
    </div>
  </section>

  <script>
    const IFRAME_SRC = './ui/index.html';
    //const IFRAME_SRC = 'http://192.168.1.111:9929/';

    let timeoutId = null;
    refreshWinPage();

    function refreshWinPage() {
      document.querySelector('#reloadBox').style.display = "block";

      let iframe = document.querySelector("#androidWebViewIFrame");;
      const src = IFRAME_SRC + (IFRAME_SRC.indexOf('?') > 0 ? `&` : `?`) + `v=${new Date().getTime()}`;
      iframe.setAttribute("src", src);

      /**自检查是否重新加载页面*/
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        const iframe = document.querySelector("#androidWebViewIFrame");;
        try {
          let _doc = iframe.contentWindow.document;
          const title = _doc.getElementsByTagName("title");
          if (!title || title.length <= 0) {
            this.refreshWinPage();
            return;
          }
          document.querySelector('#client-tool-bar').style.display='none';
          document.querySelector('#reloadBox').style.display = "none";
          initAno();
        } catch (e) {
        }
      }, 3000);
    }
    function initAno() {
      try {
        if (document.querySelector("#androidWebViewIFrame").contentWindow.androidJS) {
          return;
        }
        document.querySelector("#androidWebViewIFrame").contentWindow.androidJS = typeof androidJS == 'undefined' ? {
          executeMethod: function (router, method, params) {
            console.log(`router:${router}  \r\t method:${method} \r\t params:${params}\r\n `);
          }
        } : androidJS;
      } catch (e) {
        alert("设置依赖参数失败，当前页面仅供android使用，请使用特定的android设备使用。如果继续使用将会有部分功能不能使用！")
      }
    }
    setTimeout(() => {
      initAno();
    }, 200)

    document.querySelector("#androidWebViewIFrame").addEventListener('load', (e) => {
      initAno();
    }, false)

  </script>
</body>

</html>
